.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
	clear: both;
}
.f-right {
	float: right;
}
.f-left {
	float: left;
}
.detail-container {
	flex: 1;
	flex-direction: column;
	height: 100vh;
	background: $page-color-base;
	overflow: hidden;
}
.detail-header {
	width: 100%;
	height: 240rpx;
	background: $base-color;
	position: relative;

	.shade {
		position: absolute;
		width: 100%;
		height: 240rpx;
		background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
		z-index: 1;
	}

	.order-status {
		position: absolute;
		margin: 0 20rpx;
		width: calc(100% - 40rpx);
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 60rpx;

		text {
			color: #fff;
		}
	}
}

.info-wrap {
	margin: 0 20rpx 20rpx;
	padding: 0 20rpx;
	border-radius: $ns-border-radius;
	background: #fff;

	&.float {
		position: relative;
		margin-top: -60rpx;
	}

	.i-head {
		height: 70rpx;
		line-height: 70rpx;
	}

	.i-body {
		padding: 20rpx 0;
		.title .iconfont {
			display: inline-block;
			font-size: 32rpx;
			margin-right: 6rpx;
		}

		.desc {
			padding-left: 38rpx;
		}

		.goods-list {
			.order-goods-item {
				display: flex;
				box-sizing: border-box;
				border-top: 1px dashed #e5e5e5;
				padding: 20rpx 0;

				&:first-child {
					border-top: none;
					padding-top: 0;
				}

				&.padding-none {
					padding-bottom: 0;
				}

				.goods-img {
					width: 136rpx;
					height: 136rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-info {
					flex: 1;
					position: relative;

					.goods-name {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						line-height: 1.5;
						font-size: 28rpx;

						.gift-mark {
							display: inline-block;
							border-radius: 6rpx;
							background-color: $base-color;
							padding: 6rpx 20rpx;
							display: inline-block;
							font-size: 12px;
							line-height: 1;
							color: #fff;
							margin-right: 6rpx;
						}
					}

					.text {
						font-size: 24rpx;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.order-goods-operating {
				padding-bottom: 20rpx;
				display: flex;

				& > view {
					&:first-child {
						text-align: left;
					}
					&:last-child {
						text-align: right;
						flex: 1;
					}

					.operating-btn {
						border-radius: 6rpx;
						border: 1px solid #e5e5e5;
						background-color: white;
						padding: 4rpx 20rpx;
						display: inline-block;
						margin-left: 20rpx;

						&.operation {
							margin: 20rpx 0 20rpx;
						}
					}
				}
			}
		}

		.order-base-info {
			.copy {
				display: inline-block;
				border-radius: 6rpx;
				border: 1px solid #e5e5e5;
				background-color: white;
				padding: 6rpx 20rpx;
				display: inline-block;
				font-size: $ns-font-size-sm;
				line-height: 1;
				float: right;
			}

			.label {
				width: 160rpx;
				display: inline-block;
			}
		}

		.order-operating {
			text-align: right;

			.operating-btn {
				border-radius: 6rpx;
				padding: 6rpx 30rpx;
				display: inline-block;
				margin-left: 20rpx;
				border: 1px solid #e5e5e5;

				&.ns-bg-color-gray-shade-20 {
					background: #b7b7b7;
				}
			}
		}

		.time-line {
			margin: 0;

			.time-item {
				position: relative;
				padding-left: 40rpx;
				overflow: hidden;

				.time-divider {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					top: 50%;
					left: 0;
					transform: translateY(-50%);

					&.active {
						background: $base-color;
					}
				}
			}
		}
	}
}
